vue-cli3打包优化
VueCLI3打包优化--抽离依赖包 -
项目开发中，使用了很多依赖包，如Vue 、路由管理Vue-router 、状态管理Vuex 、UI组件库( ElementUI 、Vant )、图表（echarts ）等。打包构建，发现有一些包体积过大，会影响首页加载速度。如下所示：从上图的分析包中，可以将以下插件抽离：需要删除的依赖包VueCLI3自带了webpack analzer 等我继续说。
步骤：一、找到文件vue.config.js，没有则自己创建一个二、编写vue.config.js的内容三、修改路由方式，修改为hash，文件位置自己找，vuecli3中在router.ts文件中四、添加空路由找到编译好的文件夹，如果作为独立项目，直接拷贝后放到Tomcat里即可，如果是放到另外一个项目中使用，则拷贝到其它项目说完了。
项目开发中，使用了很多依赖包，如Vue 、路由管理Vue-router 、状态管理Vuex 、UI组件库( ElementUI 、Vant )、图表（echarts ）等。打包构建，发现有一些包体积过大，会影响首页加载速度。如下所示：从上图的分析包中，可以将以下插件抽离：需要删除的依赖包VueCLI3自带了webpack analzer 等我继续说。
步骤：一、找到文件vue.config.js，没有则自己创建一个二、编写vue.config.js的内容三、修改路由方式，修改为hash，文件位置自己找，vuecli3中在router.ts文件中四、添加空路由找到编译好的文件夹，如果作为独立项目，直接拷贝后放到Tomcat里即可，如果是放到另外一个项目中使用，则拷贝到其它项目说完了。
package.json scripts 配置serve 命令不携带--mode 时，默认运行环境为development build 命令不携带--mode 时，默认运行环境为production 可根据当前环境写死，也可在环境配置文件中，加入打包到的文件夹名（有多个环境的时候比较方便）。vue.config.js 配置打包出来的文件不提交到git 的话说完了。
从Vue CLI 3.3 起已弃用baseUrl，请使用publicPath。默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 有帮助请点赞。
vue-cli3打包之后,文件路径多了一个斜杠 -
publicPath: './'
本篇文章所说的内容是vue-cli项目中如何缩短首屏加载时间以提高效率，代码都非常详细，有需要的朋友可以看一下。主要是首屏加载太慢。大文件定位我们可以使用webpack可视化插件Webpack Bundle Analyzer 查看工程js文件大小，然后有目的的解决过大的js文件。安装npm install --save-dev webpack-bundle-到此结束了？。
vue_cli3中assets和public放置文件的区别 -
解释：public/ 目录下的文件并不会被Webpack处理：它们会直接被复制到最终的打包目录（默认是dist/static）下。必须使用绝对路径引用这些文件，这个取决于你vue.config.js中publicPath的配置，默认的是/。assets放自己写的css、js文件，后期可能会改的文件如：自己写的一些js,css样式assets目录中的文件后面会介绍。
案例环境通过vue-cli脚手架创建的vue项目在项目打包的时候遇到了背景图片路径出错的问题，经过谷歌一番，发现是在配置的时候对图片的限制大小过小造成的首先，出错点在url-loader上面。/ url-loader配置// build/webpck.base.conf.js{ test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url到此结束了？。
前端| Vue-cli3 中如何将 node-sass 替换为 dart-sass | Vue_百度...
目前vue-cli在默认选择sass预处理器时，也会优先使用dart-scss。更多相关信息可以参考这篇文章：Announcing Dart Sass 关于dart-sass的性能评测，可以查看：Perf Report 替换过程非常简单，只需几个步骤即可完成。如果使用了stylelint，可能需要修改校验规则。替换node-sass后需要注意的一点是，它不再支持之前等会说。
或直接可自行在 process.env 对象下定义需要使用的变量 一般约定 NODE_ENV 为环境变量名称 在项目中可以根据不同环境值进行差异化配置在vue-cli3构建的项目中，默认num run start 环境值为development , num run build 环境值为production ,当需要其他环境时，可安装cross-env 好了吧！